<template>
    <div style="width:90%;margin:0 auto;height:500px;overflow-y:scroll">
        <el-timeline :reverse="reverse">
            <el-timeline-item
                    v-for="(item,index) in releaseData"
                    :key="index"
                    :timestamp="item.datetime"
                    placement="top"
            >
                <el-card class="box-card" shadow="hover">
                    <div slot="header" class="clearfix">
                        <h2>{{item.title}}<span style="font-weight:normal;font-size:12px;margin:20px"></span>

                            <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                                <el-button style="float: right;" type="danger" icon="el-icon-delete" circle @click="deleteItem(item.id)"></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="查看" placement="top-start">
                                <el-button style="float: right; margin: 0 10px" type="primary" icon="el-icon-reading" circle @click="find(item.id)"></el-button>
                            </el-tooltip>
                            <el-dialog
                                    title="提示"
                                    :visible.sync="dialogVisible"
                                    width="50%"
                                    :before-close="handleClose">



                                <div style="width:90%;margin:0 auto;height:500px;overflow-y:scroll" >
                                    <el-page-header   content="公告详情"></el-page-header >
                                    <h2 style="color: red;text-align: center">{{html.title}}</h2>
                                    <h1 style="text-align: center">{{html.datetime}}</h1>
                                    <div hidden><mavon-editor  v-model="html.content" @change="handle" ></mavon-editor></div>

                                    <article v-html="myhtml"></article>
                                </div>





                                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
                            </el-dialog>

                        </h2>
                    </div>
                <h1>...点击右侧查看详情</h1>
                </el-card>
            </el-timeline-item>
        </el-timeline>
    </div>
</template>

<script>
    // eslint-disable-next-line no-unused-vars
    import { request } from "@/axios/request"
    export default {
        name: "Release",
        components: {},
        data() {
            return {
                dialogVisible: false,
                releaseData:null,
                people:'',
                reverse:true,
                html:"",
                myhtml:""
            };
        },
        created() {
            this.getData()
        },
        methods: {
            goBack() {
                this.$router.push({ path: "/home/release" });
            },
            handle(value, render) {
                this.myhtml = render;
                console.log(value, render);
            },
            find(id){
               this.dialogVisible = true;
               console.log("id = " + id)
                request({
                    url: "/notice/"+id,
                    method: "get",
                }).then((res) => {
                    this.$nextTick(() => { // 注意看这里
                      console.log(res.data.object)
                        this.html = res.data.object
                    })

                });
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },


            getData(){
                request({
                    url: "/notice",
                    method: "get",
                }).then((res) => {
                    this.$nextTick(() => { // 注意看这里
                        this.releaseData = res.data.object;
                    })

                });
            },
            deleteItem(index){
                if (  confirm("确定要删除此公告？")){
                    request({
                        url: "/notice/"+index,
                        method: "delete",
                    }).then((res) => {

                        this.$nextTick(() => {
                            if (res.data.stateCode == 200){
                                this.$message({
                                    message:res.data.msg,
                                    type:'success'
                                })}else {
                                this.$message({
                                    message:res.data.msg,
                                    type:'error'
                                })
                            }
                            this.getData();
                        })
                    });
                }


            },
            view(item){
                this.$store.commit('setContent',item)
                console.log("123" + item)
                this.$router.push({path:'/home/viewRelease'})
            },
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>

